/* 全局样式 */
view, text, button, input, textarea, scroll-view, swiper, image {
	box-sizing: border-box;
}

page {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
	line-height: 1.6;
	color: #333;
	background-color: #f8f8f8;
}

/* 布局类 */
.flex {
	display: flex;
}

.flex-column {
	display: flex;
	flex-direction: column;
}

.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.flex-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.flex-around {
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.flex-1 {
	flex: 1;
}

/* 间距类 */
.m-0 { margin: 0; }
.m-10 { margin: 10rpx; }
.m-20 { margin: 20rpx; }
.m-30 { margin: 30rpx; }

.mt-10 { margin-top: 10rpx; }
.mt-20 { margin-top: 20rpx; }
.mt-30 { margin-top: 30rpx; }

.mb-10 { margin-bottom: 10rpx; }
.mb-20 { margin-bottom: 20rpx; }
.mb-30 { margin-bottom: 30rpx; }

.ml-10 { margin-left: 10rpx; }
.ml-20 { margin-left: 20rpx; }
.ml-30 { margin-left: 30rpx; }

.mr-10 { margin-right: 10rpx; }
.mr-20 { margin-right: 20rpx; }
.mr-30 { margin-right: 30rpx; }

.p-0 { padding: 0; }
.p-10 { padding: 10rpx; }
.p-20 { padding: 20rpx; }
.p-30 { padding: 30rpx; }

.pt-10 { padding-top: 10rpx; }
.pt-20 { padding-top: 20rpx; }
.pt-30 { padding-top: 30rpx; }

.pb-10 { padding-bottom: 10rpx; }
.pb-20 { padding-bottom: 20rpx; }
.pb-30 { padding-bottom: 30rpx; }

.pl-10 { padding-left: 10rpx; }
.pl-20 { padding-left: 20rpx; }
.pl-30 { padding-left: 30rpx; }

.pr-10 { padding-right: 10rpx; }
.pr-20 { padding-right: 20rpx; }
.pr-30 { padding-right: 30rpx; }

/* 文本类 */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-12 { font-size: 24rpx; }
.text-14 { font-size: 28rpx; }
.text-16 { font-size: 32rpx; }
.text-18 { font-size: 36rpx; }
.text-20 { font-size: 40rpx; }

.text-bold { font-weight: bold; }
.text-normal { font-weight: normal; }

.text-primary { color: #667eea; }
.text-secondary { color: #666; }
.text-success { color: #52c41a; }
.text-warning { color: #faad14; }
.text-danger { color: #ff4d4f; }
.text-white { color: #fff; }
.text-black { color: #000; }
.text-gray { color: #999; }

/* 背景类 */
.bg-white { background-color: #fff; }
.bg-primary { background-color: #667eea; }
.bg-secondary { background-color: #f8f8f8; }
.bg-success { background-color: #52c41a; }
.bg-warning { background-color: #faad14; }
.bg-danger { background-color: #ff4d4f; }

/* 边框类 */
.border { border: 1rpx solid #e8e8e8; }
.border-top { border-top: 1rpx solid #e8e8e8; }
.border-bottom { border-bottom: 1rpx solid #e8e8e8; }
.border-left { border-left: 1rpx solid #e8e8e8; }
.border-right { border-right: 1rpx solid #e8e8e8; }

.border-radius { border-radius: 8rpx; }
.border-radius-10 { border-radius: 10rpx; }
.border-radius-20 { border-radius: 20rpx; }
.border-radius-circle { border-radius: 50%; }

/* 阴影类 */
.shadow {
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.shadow-light {
	box-shadow: 0 1rpx 5rpx rgba(0, 0, 0, 0.05);
}

.shadow-heavy {
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.15);
}

/* 按钮类 */
.btn {
	padding: 20rpx 40rpx;
	border-radius: 8rpx;
	border: none;
	font-size: 28rpx;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s;
}

.btn-primary {
	background-color: #667eea;
	color: white;
}

.btn-secondary {
	background-color: #f8f8f8;
	color: #333;
}

.btn-success {
	background-color: #52c41a;
	color: white;
}

.btn-warning {
	background-color: #faad14;
	color: white;
}

.btn-danger {
	background-color: #ff4d4f;
	color: white;
}

.btn-small {
	padding: 10rpx 20rpx;
	font-size: 24rpx;
}

.btn-large {
	padding: 30rpx 60rpx;
	font-size: 32rpx;
}

.btn:active {
	opacity: 0.8;
	transform: scale(0.98);
}

/* 卡片类 */
.card {
	background: white;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	margin-bottom: 20rpx;
}

.card-header {
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
	margin-bottom: 20rpx;
}

.card-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.card-body {
	line-height: 1.6;
}

/* 列表类 */
.list-item {
	padding: 30rpx;
	border-bottom: 1rpx solid #f0f0f0;
	background: white;
}

.list-item:last-child {
	border-bottom: none;
}

.list-item:active {
	background-color: #f8f8f8;
}

/* 输入框类 */
.input {
	padding: 20rpx 30rpx;
	border: 1rpx solid #ddd;
	border-radius: 8rpx;
	font-size: 28rpx;
	background-color: #fff;
}

.input:focus {
	border-color: #667eea;
}

.input-group {
	position: relative;
}

.input-group .input {
	padding-right: 80rpx;
}

.input-group .input-suffix {
	position: absolute;
	right: 20rpx;
	top: 50%;
	transform: translateY(-50%);
}

/* 动画类 */
.fade-in {
	animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.slide-up {
	animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
	from { transform: translateY(100%); }
	to { transform: translateY(0); }
}

/* 工具类 */
.overflow-hidden { overflow: hidden; }
.ellipsis { 
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.line-clamp-2 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.line-clamp-3 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
